<template>

  <!-- 回复工单页 -->
  <div style="width: 100%;overflow: hidden;">
    <van-popup
      v-model="show"
      position="left"
      class="fa"
      :style="{ height: '100%', width: '100%' }"
    >
      <div style="height: 100%;overflow: auto;">
         <!-- 引入公共头部组件 -->
      <HeaderMenu title="工单" leftText="返回" />
        <!-- <van-nav-bar
          title="工单"
          left-text="返回"
          left-arrow
          @click-left="$router.go(-1)"
        /> -->
        <van-form @submit="onSubmit">
          <van-field
            label="工单标题"
            readonly
            placeholder="工单标题"
            v-model="entity.SWOTitle"
          />
          <van-field
            label="日期"
            readonly
            placeholder="日期"
            v-model="entity.StartTime"
          />

          <van-field
            label="内容"
            readonly
            placeholder="内容"
            v-model="entity.SWOContent"
          />
          <van-tabs v-model="active">
            <van-tab title="反馈信息">
              <div style="margin-top: 10px">
                <van-field
                  label="费用信息"
                  placeholder="请输入费用信息,没有可以不填"
                  type="number"
                  v-model="entity.ExpenseInfo"/>
                <van-field
                  label="反馈信息"
                  placeholder="请输入反馈的信息"
                  required
                  type="textarea"
                  rows="15"
                  maxlength="500"
                  show-word-limit
                  v-model="entity.FeedbackInfo"/>
              </div>
            </van-tab>
            <van-tab title="历史记录">
              <van-cell-group v-for="item in list" :key="item.Id">
                <van-cell
                  :title="`${item.ExecutorName}   $${item.ExpenseInfo || '无'}`"
                  :value="`${item.CreateTime.substring(0, 10)}`"
                  :label="item.FeedbackInfo"
                /> </van-cell-group
            ></van-tab>
          </van-tabs>

          <div class="submitButton" >
            <van-button round block type="info" native-type="submit"
              >回复</van-button
            >
          </div>
        </van-form>
      </div>

      <Myuser ref="myuser" />
    </van-popup>
  </div>
</template>

<script>
import { Icon } from "vant";
import { Popup } from "vant";
import { AddressList } from "vant";

import {
  Row,
  Col,
  Cell,
  CellGroup,
  Stepper,
  Toast,
  Calendar,
  NavBar
} from "vant";
import { Field } from "vant";
//客户
import Myuser from "../../components/OwnUser.vue";
// 引入公共头部组件
import HeaderMenu from "../../components/VolHeaderMenu.vue";
export default {
  props: {
    parentObj: Object,
    readonly: Boolean
  },
  components: {
    "van-stepper": Stepper,
    "van-calendar": Calendar,
    "van-nav-bar": NavBar,
    "van-icon": Icon,
    "van-popup": Popup,
    "van-row": Row,
    "van-address-list": AddressList,
    "van-field": Field,
    "van-col": Col,
    "van-cell": Cell,
    "van-cell-group": CellGroup,
    Myuser,
    HeaderMenu
  },
  data() {
    return {
      active: 0,
      finished: false,
      loading: false,
      info: {},
      SWOAList: [],
      showUser: false,
      entity: {},
      data: [],
      list: [],
      showPicker: false,
      show: false,
      showDate: false,
      Id: "",
      EndshowDate: false,
      columns: []
    };
  },
  created() {
    var obj = {
      Id: this.$route.query.Id
    };
    this.openForm(obj);
  },
  methods: {
    swipeleft() {
      this.show = false;
      // alert("123");
    },
    touchstart(e) {
      // alert("123");

      // e.preventDefault();

      this.startX = e.touches[0].clientX;
      this.startY = e.touches[0].clientY;
    },
    touchmove(e) {
      //    this.show = false;
      // e.preventDefault();
      this.moveX = e.touches[0].clientX;
      this.moveY = e.touches[0].clientY;
      // this.startX - this.moveX <= 0
      //   ? console.log("你在往右滑")
      //   : console.log("你在往左滑");
    },

    op() {
      this.http.post("/Base_Manage/Home/GetOperatorInfo").then(resJson => {
        if (resJson.Success) {
          this.info = resJson.Data.UserInfo;
        }
      });
    },
    onSubmit() {
      console.log(this.info);
      let row = {};
      console.log(this.entity);
      row.SWOMId = this.entity.Id;
      row.ExecutorId = this.info.Id;
      row.ExecutorName = this.info.RealName;
      row.FeedbackInfo = this.entity.FeedbackInfo;
      row.ExpenseInfo = this.entity.ExpenseInfo;

      this.http
        .post("/SWOManagement/ServiceWorkOrderDetail/SaveData", row)
        .then(resJson => {
          if (resJson.Success) {
            Toast.success("回复成功!");
            this.show = false;
            // 跳转我的工单
            // this.$router.push("/workOrder/myWorkOrder");
            // 返回上一页
            this.$router.back()
          } else {
            Toast(resJson.Msg);
          }
        });
    },
    openForm(item) {
      this.show = true;
      this.entity = {};
      this.op();
      this.http
        .post("/SWOManagement/ServiceWorkOrderMain/GetTheDataForDetail", {
          id: item.Id
        })
        .then(resJson => {
          if (resJson.Success && resJson.Data) {
            this.entity = resJson.Data;
            this.list = resJson.Data.SWODList;
            if (this.entity.StartTime) {
              this.$set(
                this.entity,
                "StartTime",
                this.entity.StartTime.substring(0, 10)
              );
            }
          } else {
            Toast(resJson.Msg);
          }
        });
    }
  }
};
</script>
